import React, { Component } from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'
import "./Index.less"

export class Index extends Component {
  render() {
    return (
      <div className='index'>
        <Switch>
          <Route path="/index/home" component={Home}/>
          <Route path="/index/cate" component={Cate}/>
          <Route path="/index/shop" component={Shop}/>
          <Route path="/index/mine" component={Mine}/>
        </Switch>

        {/* 底部导航 */}
        <footer>
          <NavLink activeClassName="active" to="/index/home">
            <i className="iconfont icon-shouye"></i>
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/cate">
            <i className="iconfont icon-fenlei"></i>
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/shop">
            <i className="iconfont icon-gouwucheman"></i>
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName="active" to="/index/mine">
            <i className="iconfont icon-wode"></i>
            <div>我的</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}

export default Index